<template>
	<div class="publish-time-wrap" @click="test">
		<div class="select-area">
			<el-select v-model="MMDD" placeholder="请选择日期" size="mini" @change="dateChange">
			    <el-option
			      	v-for="item in dateTime"
			      	:key="item.value"
			      	:label="item.label"
			      	:value="item.value"
			      	@click.native="dateClick(item)"
			    >
			    </el-option>
			</el-select>

			<el-select v-model="hh" placeholder="请选择小时" size="mini" @change="hourChange">
			    <el-option
			      	v-for="item in hours"
			      	:key="item.value"
			      	:label="item.label"
			      	:value="item.value"
			      	@click.native="hourClick(item)"
			    >
			    </el-option>
			</el-select>

			<el-select v-model="mm" placeholder="请选择分钟" size="mini" @change="minuteChange">
			    <el-option
			      	v-for="item in minutes"
			      	:key="item.value"
			      	:label="item.label"
			      	:value="item.value">
			    </el-option>
			</el-select>
		</div>
			
		<p class="tip">（只能选择2小时-7天范围内的时间）</p>
		<p class="tip">本文将于 {{yyyy}}-{{MMDD}}  {{hh}}：{{mm}} 发表</p>
	</div>
</template>

<script>
	
export default{
	data(){
		return{
			dateTime:[],
			hours:[],
			minutes:[],
			yyyy:'',
			MMDD:'',
			hh:'',
			mm:''
		}
	},
	mounted(){
		this.init();
		this.updateTime();
	},
	methods:{
		test(){
			console.log(this.MMDD+' '+this.hh+':'+this.mm)
		},
		init(){
			var day_stamp = 24*60*60*1000;
			//获取开始时间，在现有时间加2个小时
			var cur_stamp = new Date().getTime()+2*60*60*1000;
			var now = new Date(cur_stamp);

			var cur_MM = now.getMonth()+1;
			var cur_DD = now.getDate();
			var cur_hh = now.getHours();
			var cur_mm = now.getMinutes();
			

			this.MMDD = (cur_MM<10 ? '0'+cur_MM : cur_MM) +'-'+ (cur_DD<10 ? '0'+cur_DD :cur_DD);
			this.hh = cur_hh<10 ? '0'+cur_hh : cur_hh;
			this.mm = cur_mm<10 ? '0'+cur_mm : cur_mm;

			var deadline_stamp = cur_stamp + 7*24*60*60*1000;
			var deadline = new Date(deadline_stamp);
			var deadline_MM = deadline.getMonth()+1;
			var deadline_DD = deadline.getDate();
			var deadline_hh = deadline.getHours();
			var deadline_mm = deadline.getMinutes();

			console.log("区间日期为："+cur_MM+'月'+cur_DD+'日'+' '+cur_hh+'时'+cur_mm+'分'+'--'+deadline_MM+'月'+deadline_DD+'日'+' '+deadline_hh+'时'+deadline_mm+'分');

			var date_arr = [];

			for(var i=0;i<8;i++){
				var item = {};
				
				//获取新的日期
				var n_day = new Date(cur_stamp+i*day_stamp);
				var n_day_yy = n_day.getFullYear();
				var n_day_MM = n_day.getMonth()+1;
				var n_day_DD = n_day.getDate();

				item['year'] = n_day_yy;
				item['label'] = n_day_MM+'月'+n_day_DD+'日';
				item['value'] = (n_day_MM<10 ? "0"+n_day_MM : n_day_MM)+'-'+(n_day_DD<10 ? "0"+n_day_DD : n_day_DD);

				//构造小时
				item['hour'] = [];
				for(var j=0;j<24;j++){
					if(i==0 && j < cur_hh){
						continue;
					}

					if(i==7 && j > deadline_hh){
						continue;
					}

					var h_item = {};
					h_item['label'] = j+'时';
					h_item['value'] = j<10 ? '0'+j : j;
					//构造分钟
					h_item['minute'] = [];

					for(var m=0;m<60;m++){
						if(i==0 && j==cur_hh && m < cur_mm){
							continue;
						}

						if(i==7 && j==deadline_hh && m > deadline_mm){
							continue;
						}

						var m_item = {};
						m_item['label'] = m+'分';
						m_item['value'] = m<10 ? '0'+m : m;
						h_item['minute'].push(m_item);


						
					}

					if(i==0 && j==cur_hh){
						this.minutes = h_item['minute'];
					}

					item['hour'].push(h_item);
				}
				
				if(i==0){
					this.yyyy = item['year'];
					this.hours = item['hour'];
				}


				date_arr.push(item);
			}

			console.log(date_arr)
			this.dateTime = date_arr;
		},
		//日期改变
		dateChange(val){
			console.log(val)
			this.MMDD = val;
			this.updateTime();
		},
		dateClick(item){
			console.log(item);
			this.yyyy = item.year;
			this.hours = item.hour;
		},
		//小时改变
		hourChange(val){
			this.hh = val;
			this.updateTime();
		},
		hourClick(item){
			console.log(item)
			this.minutes = item.minute;
		},
		//分钟改变
		minuteChange(val){
			this.mm = val;
			this.updateTime();
		},
		updateTime(){
			var date = this.yyyy+'-'+this.MMDD+' '+this.hh+':'+this.mm+':00';
			this.$emit('update-time',date)
		}
	}
}

</script>

<style scoped>
	.publish-time-wrap .select-area{
		margin-bottom: 30px;
	}
	.publish-time-wrap .tip{
		text-align: center;
		padding: 5px 0;
		font-size: 14px;
	}
</style>